<template>
    <!-- 查询区 -->
    <div class="search">
        <el-form :inline="true" :model="ad" ref="searchfromat">
            <el-form-item label="套餐编号" prop="facilityId">
                <el-input placeholder="请输入套餐编号" v-model="ad.facilityId" />
            </el-form-item>
            <el-form-item label="套餐名称" prop="facilityName">
                <el-input placeholder="请输入套餐名称" v-model="ad.facilityName" />
            </el-form-item>
            <el-form-item label="早餐类型" prop="breakfast">
                <el-input placeholder="请输入早餐类型" v-model="ad.breakfast" />
            </el-form-item>
            <el-form-item label="观影厅类型" prop="yingyuan">
                <el-input placeholder="请输入观影厅类型" v-model="ad.yingyuan" />
            </el-form-item>
            <el-form-item label="厨房类型" prop="chufang">
                <el-input placeholder="请输入厨房类型" v-model="ad.chufang" />
            </el-form-item>
            <el-form-item label="卫浴设施" prop="duwei">
                <el-input placeholder="请输入卫浴类型" v-model="ad.duwei" />
            </el-form-item>
            <el-button type="success" :icon="Search" @click="search" style="margin-bottom: 20px;">查询</el-button>
            <el-button type="success" :icon="Refresh" @click="restform" style="margin-bottom: 20px;">重置</el-button>
        </el-form>
    </div>
    <div class="xinzeng">
        <el-button type="success" :icon="CirclePlus" @click="addnew" style="margin-bottom: 20px;"> 新增</el-button>
    </div>
    <!-- 表格 -->
    <div class="table">
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="headerCellStyle" align="center"
            ref="table">
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column prop="facilityId" label="套餐编号" width="140" align="center" />
            <el-table-column prop="facilityName" label="套餐名称" width="180" align="center" />
            <el-table-column prop="breakfast" label="早餐类型" width="100" align="center" />
            <el-table-column prop="yingyuan" label="观影厅类型" width="180" align="center" />
            <el-table-column prop="duwei" label="卫浴设施" width="180" align="center" />
            <el-table-column prop="chufang" label="厨房类型" align="center" />
            <el-table-column fixed="right" label="操作" width="160" align="center">
                <!-- 点击时获取这行的数据  @click="edit(scope.row)"  @click="delbyid(scope.row)" -->
                <template v-slot="scope">
                    <el-button type="success" size="small" @click="edit(scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button type="danger" size="small" @click="delbyid(scope.row)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination v-model:current-page="pi.pageNo" v-model:page-size="pi.pageSize" :total="pi.total"
                layout="total, prev, pager, next, jumper" background @change="paginate" />
        </div>

    </div>
    <el-dialog v-model="show" :title="title" width="800" draggable :close-on-click-modal="false" @close="close"
        style="margin-bottom: 5px;text-align: center;">
        <el-form :model="aeform" ref="sfRef">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="套餐编号：" label-width="100" prop="facilityId">
                        <el-input v-model="aeform.facilityId" placeholder="请输入套餐编号" />
                    </el-form-item>
                    <el-form-item label="套餐名称：" label-width="100" prop="facilityName">
                        <el-input v-model="aeform.facilityName" placeholder="请输入套餐名称" />
                    </el-form-item>
                    <el-form-item label="卫浴设施：" label-width="100" prop="duwei">
                        <el-input v-model="aeform.duwei" placeholder="请输入卫浴类型" />
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="早餐类型：" label-width="100" prop="breakfast">
                        <el-input v-model="aeform.breakfast" placeholder="请输入早餐类型" />
                    </el-form-item>

                    <el-form-item label="观影厅类型：" label-width="100" prop="yingyuan">
                        <el-input v-model="aeform.yingyuan" placeholder="请输入观影厅类型" />
                    </el-form-item>
                    <el-form-item label="厨房类型：" label-width="100" prop="chufang">
                        <el-input v-model="aeform.chufang" placeholder="请输入厨房类型" />
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <!-- 对话框的按钮。插槽 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted, nextTick, toRaw } from "vue"
import { findall, deleteids,adduser,updateuser} from "@/api/foodApi"
import { Delete, Edit, Refresh, Search, CirclePlus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
onMounted(() => {
    search();
});
let tableData = ref();
async function search() {
    let params = toRaw(ad.value);
    console.log(params);
    let resp = await findall(pi.value.pageNo, pi.value.pageSize, params);
    //console.log(resp);
    tableData.value = resp.data;
    pi.value = resp.pi;
}
//分页
const pi = ref({
    pageNo: 1,
    pageSize: 10,
    total: 0
});
function paginate() {
    search();
}
//表头颜色
function headerCellStyle() {
    return {
        backgroundColor: "#B3CAD8",
        textAlign: "center",
        color: "#fff"
    }
}
//条件查询
let ad = ref({
    facilityId: "",
    facilityName: "",
    breakfast: "",
    duwei: "",
    yingyuan: "",
    chufang: ""
});
let searchfromat;
function restform() {
    searchfromat.resetFields();
    search();
}
let aeform = ref({
    facilityId: "",
    facilityName: "",
    duwei: "",
    breakfast: "",
    yingyuan: "",
    chufang: ""
});
let title = ref("新增套餐");
let show = ref(false);


let sfRef;
function close(){
    sfRef.resetFields();
}
function addnew(){
    title.value="新增套餐";
    show.value=true;
}
//点击提交判断是提交还是修改
function submitForm() {
    //let xxuser = toRaw(aeform.value);
   let xxuser= aeform.value;
    if (xxuser.id) {
        //有id调用修改
        submitEdit(xxuser);
    } else {
       
        //无id调用新增
        submitadd(xxuser);

    }
}
async function submitadd(xxuser) {
    let resp = await adduser(xxuser);

    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请检查数据完整性或联系管理员',
            type: 'error',
        });
        //show.value=false;
    }
}
//修改
function edit(row) {
    //浅克隆
    row = Object.assign({}, row);
    show.value = true;
    title.value = "修改住客",
        nextTick(() => {
            aeform.value = row;
        });
}
async function submitEdit(user) {
    //向后台提交数据
    let resp = await updateuser(user);

    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请检查数据完整性或联系管理员',
            type: 'error',
        });
        //show.value=false;
    }
}
//删除
function delbyid(row){
    ElMessageBox.confirm(
        "您确定要删除吗？",
        "确认", {
        type: 'warning',
    }
    ).then(async () => {
        let id = row.id;
        let ids = [];
        ids.push(id);
        let resp = await deleteids(ids);
        if (resp.success) {
            ElMessage({
                message: "删除成功",
                type: "success"
            });
            //成功之后刷新
            search();
        } else {
            ElMessage({
                message: "删除失败,请联系管理员",
                type: "error"
            });

        }
    })
}



</script>
<style scoped>.xinzeng{
    position: absolute;
    left :995px;
    top: 139px;
   
}</style>